<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                template="./../WEB-INF/template/default.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="title">
        Registro de miembros
    </ui:define>

    <ui:define name="content">
        <f:facet name="header" >
            <h:outputLabel value="Registro de miembros" />
        </f:facet>
        <p:accordionPanel>
            <p:tab title="Datos personales" >
                <h:panelGrid columns="5" >
                    <h:outputLabel value="Nombres"  />
                    <h:panelGroup>
                        <p:inputText id="txNombre" required="true" requiredMessage="Nombre es requerido"
                                     value="#{miembroBean.current.nombre}" styleClass="default-inputtext" maxlength="50" />
                        <p:message for="txNombre" />
                    </h:panelGroup>
                    <p:spacer width="30" />
                    <h:outputLabel value="Apellidos"  />
                    <h:panelGroup>
                        <p:inputText id="txApellido" required="true" requiredMessage="Apellido es requerido"
                                     value="#{miembroBean.current.apellido}" styleClass="default-inputtext" maxlength="50" />
                        <p:message for="txApellido" />
                    </h:panelGroup>

                    <h:outputLabel value="Fecha de nacimiento" styleClass="label-bg-e" />
                    <h:panelGroup>
                        <p:calendar id="clFechaNacimiento" pattern="dd/MM/yyyy" required="true" requiredMessage="Fecha de nacimiento es requerida"
                                    value="#{miembroBean.current.fechaNacimiento}" mode="popup" showOn="button"/>
                        <p:message for="clFechaNacimiento" />
                    </h:panelGroup>
                    <p:spacer width="30" />
                    <h:outputLabel value="Sexo" styleClass="label-bg-e" />
                    <h:panelGroup>
                        <p:selectOneRadio id="optSexo" required="true" requiredMessage="Sexo es un dato requerido" 
                                          value="#{miembroBean.current.sexo}" >
                            <f:selectItem itemLabel="Masculino" itemValue="M" />
                            <f:selectItem itemLabel="Femenino" itemValue="F" />
                        </p:selectOneRadio>
                        <p:message for="optSexo" />
                    </h:panelGroup>

                    <h:outputLabel value="Estado civil"  />
                    <h:panelGroup>
                        <p:selectOneMenu id="lvEstadoCivil" styleClass="select-one-menu-form" required="true" requiredMessage="Estado civil es requerido" 
                                         value="#{miembroBean.current.estadoCivil.id}" >
                            <f:selectItem itemLabel="[ SELECCIONE ESTADO CIVIL ]" />
                            <f:selectItems value="#{miembroBean.listaEstadoCivil}" var="e" itemLabel="#{e.nombre}" itemValue="#{e.id}" />
                        </p:selectOneMenu>
                        <p:message for="lvEstadoCivil" />
                    </h:panelGroup>
                    <p:spacer width="30" />
                    <h:panelGroup />
                    <h:panelGroup />


                    <h:outputLabel value="Fecha de matrimonio" styleClass="label-bg-e"  />
                    <p:calendar id="clFechaMatrimonio" pattern="dd/MM/yyyy"
                                value="#{miembroBean.current.fechaMatrimonio}" mode="popup" showOn="button"/>
                    <p:spacer width="30" />
                    <h:outputLabel value="Conyuge" styleClass="label-bg-e" />
                    <p:inputText id="txConyuge" value="#{miembroBean.current.conyuge}" styleClass="default-inputtext" maxlength="50" />


                    <h:outputLabel value="Profesi&oacute;n"  />
                    <h:panelGroup>
                        <p:selectOneMenu id="lvProfesion" styleClass="select-one-menu-form" required="true" requiredMessage="Profesi&oacute;n es requerido" 
                                         value="#{miembroBean.current.profesion.id}" filterMatchMode="contains" filter="true" >
                            <f:selectItem itemLabel="[ SELECCIONE PROFESION ]" />
                            <f:selectItems value="#{miembroBean.listaProfesiones}" var="p" itemLabel="#{p.nombre}" itemValue="#{p.id}" />
                        </p:selectOneMenu>
                        <p:message for="lvProfesion" />
                    </h:panelGroup>
                    <p:spacer width="30" />
                    <h:panelGroup />
                    <h:panelGroup />


                    <h:outputLabel value="E-mail" />
                    <p:inputText id="txEmail" value="#{miembroBean.current.email}" styleClass="default-inputtext" maxlength="30" />
                    <p:spacer width="30" />
                    <h:panelGroup />
                    <h:panelGroup />


                    <h:outputLabel value="DUI"  />
                    <h:panelGroup>
                        <p:inputText id="txDUI" value="#{miembroBean.current.dui}" required="true" requiredMessage="DUI es requerido" 
                                     styleClass="default-inputtext" maxlength="25" />
                        <p:message for="txDUI" />
                    </h:panelGroup>
                    <p:spacer width="30" />
                    <h:outputLabel value="NIT"  />
                    <p:inputText id="txNIT" value="#{miembroBean.current.nit}" styleClass="default-inputtext" maxlength="25" />


                    <h:outputLabel value="Tel&eacute;fono" styleClass="label-bg-e" />
                    <p:inputText id="txTelefono" value="#{miembroBean.current.telefono}" styleClass="default-inputtext" maxlength="15" />
                    <p:spacer width="30" />
                    <h:outputLabel value="Celular" styleClass="label-bg-e" />
                    <p:inputText id="txCelular" value="#{miembroBean.current.celular}" styleClass="default-inputtext" maxlength="15" />


                </h:panelGrid>
            </p:tab>
            <p:tab title="Datos laborales" >
                <h:panelGrid columns="5" ></h:panelGrid>
            </p:tab>
            <p:tab title="Datos academicos" >
                <h:panelGrid columns="5" ></h:panelGrid>
            </p:tab>
            <p:tab title="Datos familiares" >
                <h:panelGrid columns="5" ></h:panelGrid>
            </p:tab>
        </p:accordionPanel>


        <!--h:form class="form-horizontal" >

            <h:panelGrid columns="2">

                <h:outputLabel value="Lugar de Trabajo:" styleClass="form-label"/>
                <p:inputText/>

                <h:outputLabel value="Direccion:"/>
                <p:inputText/>

                <h:outputLabel value="Puesto:"/>
                <p:inputText/>

                <h:outputLabel value="Telefono:"/>
                <p:inputText/>
            </h:panelGrid>

            <h2>Datos Academicos</h2>

            <h:panelGrid columns="2">
                <h:outputLabel value="Centro de Estudios:" styleClass="form-label"/>
                <p:inputText/>

                <h:outputLabel value="Carrera:"/>
                <p:inputText/>

                <h:outputLabel value="Nivel:"/>
                <p:inputText/>

            </h:panelGrid>

            <h2>Datos Familiares</h2>
            <h:panelGrid columns="2">
                <h:outputLabel styleClass="form-label"/>
                <p:dataTable emptyMessage="No se han encontrado familiares" paginator="true" rows="10" >
                    <f:facet name="header">
                        <h:outputLabel value="Listado de Familiares" />
                    </f:facet>
                    <p:column headerText="Nombre" >

                    </p:column>
                    <p:column headerText="Parentezco" >

                    </p:column>
                    <p:column headerText="Edad" >

                    </p:column>
                </p:dataTable>
            </h:panelGrid>
        </h:form-->
    </ui:define>

</ui:composition>